<template>
	<view class="WC">
		<map id="map" class="map"
			:latitude="latitude" 
			:longitude="longitude" 
			:scale="15" 
			:show-location="true">
			
			<cover-view class="shrinked" v-if="shrink" key="shrinked" @click="doShirnk(false)">
				共{{list.length || 20}}个接地线正在使用中...
			</cover-view>
			<cover-view class="modal" v-else key="modal" @click="doShirnk(true)">
				<cover-view class="list" v-if="!showDetail">
					<cover-view class="item" v-for="item in list" :key="item.id" @click.stop="toDetail(item)">
						<cover-view class="row">
							工作票编号：{{item.jdx_no || 'XXXXXXX'}} 
						</cover-view>
						<cover-view class="row">
							<cover-view class="col">
								工作地点：{{item.work_location || 'XX变电站'}} 
							</cover-view>
							<cover-view class="col">
								工作内容：{{item.work_content || '屋面防水装修'}} 
							</cover-view>
						</cover-view>
						<cover-view class="row">
							<cover-view class="col">
								接地线编号：{{item.jdx_no || '01b-001'}} 
							</cover-view>
							<cover-view class="col">
								接地线位置：{{item.position}} 
							</cover-view>
						</cover-view>
						<cover-view class="row">
							接地线状态：
							A相  正常
							B相  正常
							C相  正常
						</cover-view>
					</cover-view>
				</cover-view>
				<cover-view class="detail" v-else key="detail">
					<cover-view class="row">
						工作票编号：{{detail.jdx_no || 'XXXXXXX'}} 
					</cover-view>
					<cover-view class="row">
						<cover-view class="col">
							工作地点：{{detail.work_location || 'XX变电站'}} 
						</cover-view>
						<cover-view class="col">
							工作内容：{{detail.work_content || '屋面防水装修'}} 
						</cover-view>
					</cover-view>
					<cover-view class="row">
						<cover-view class="col">
							接地线编号：{{detail.jdx_no || '01b-001'}} 
						</cover-view>
						<cover-view class="col">
							接地线位置：{{detail.position}} 
						</cover-view>
					</cover-view>
					<cover-view class="row">
						接地线状态：
						A相  正常
						B相  正常
						C相  正常
					</cover-view>
					<cover-view class="row">
						<cover-view class="col">
							操作棒编号：{{detail.jdx_no || '01b-001'}} 
						</cover-view>
						<cover-view class="col">
							操作棒状态：{{detail.position}} 
						</cover-view>
					</cover-view>
					<cover-view class="row">
						作业单位：XXXXXXXXXXXXXXXX
					</cover-view>
					<cover-view class="row">
						工作负责人：XXXXXXXXXXXXXXXX
					</cover-view>
					<cover-view class="row">
						项目单位：XXXXXXXXXXXXXXXX
					</cover-view>
				</cover-view>
			</cover-view>
			
		</map>
		
		
	</view>
</template>
	
<script>
import api from '../../consts/api.js'
export default {
	data() {
		return {
			latitude: 32.0270,
			longitude: 118.795264,
			shrink: true,
			list: [
				{
					jdx_no: 'xx'
				}
			],
			showDetail: false,
			detail: {},
			points: []
		}
	},
	methods: {
		doShirnk(flag) {
			if (!this.list.length) {
				return
			}
			console.log(flag)
			this.shrink = flag
			if (!flag) {
				this.showDetail = false
			}
			
		},
		
		getLocation() {
			console.log('ggt')
			const that = this
			uni.getLocation({
				type: 'gcj02',
				geocode: true,
				success (res) {
					console.log(res.address || res)
					that.latitude = res.latitude
					that.longitude = res.longitude

					that.getCity(res.latitude,res.longitude)
					that.getRange()

				},
				fail (err) {
					that.latitude = 32.0270
					that.longitude = 118.795264
				},
				complete () {
					that.mapVisable = true
				}
			});
		},
		openLocation(latitude,longitude) {
			console.log('nav')
			uni.openLocation({
				latitude,
				longitude,
				name: "",
				scale: 15
			})
		},
		toDetail(item) {
			this.detail = item
			this.showDetail = true
		},
		
		async getJdxMap() {
			let {code, data} = await this.$fetch('GET',api, {
				method: 'getJdxMap'
			})
			if (code==0) {
			
				let mapPoints = data.map(p => ({
				  name: p.dqQj,
				  value: [+p.lon, +p.lat],
				  dqSn: p.dqSn,
				  workPosition: p.workPosition,
				  task: p.task
				}))

				this.points = data
			
			} else {
				
			}
		},
	},
	onLoad() {
		console.log(api)
		this.getJdxMap()
		this.getLocation()
	}
}
</script>
	
	<style>
	.WC {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
		
	.map {
		width: 100%;
		height: 100%;
	}
	
	.shrinked {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 750upx;
		height: 100upx;
		background: #FFFFFF;
		line-height: 100upx;
		text-align: center;
	}
	
	.modal {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, .6);
	}
	
	.list {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 750upx;
		min-height: 200upx;
		max-height: 450upx;
		background: #FFFFFF;
		line-height: 100upx;
		text-align: center;
		overflow-y: scroll;
	}
	.item {
		height: 200upx;
		border-bottom: 1upx solid #4D4D4D;
		
	}
	.row {
		display: flex;
		margin: 20upx;
		font-size: 14upx;
		color: #808080;
	}
	.col {
		width: 50%;
		text-align: left;
	}
	.detail {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 750upx;
		min-height: 200upx;
		background: #FFFFFF;
	}
	</style>
